<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      action
      accept="video/*"
      :http-request="handleRequest"
      :on-change="videoChange"
    >
      <div class="submit">录制/上传视频</div>
    </el-upload>
    <div>进度：{{ videoProgress }}</div>
    <div @click="cancelUpload">取消</div>
    <div @click="wxOpen">微信调用摄像头</div>
    <input type="file" accept='video/*' />
  </div>
</template>
<script>
import TcVod from "vod-js-sdk-v6";
import $api from "../../api/index";
export default {
  data() {
    return {
      tcVod: null,
      videoProgress: 0,
      uploader: null
    };
  },
  async created() {
    console.log($api, "$api");
    const getSignature = await $api.common.getSignature;
    this.tcVod = new TcVod({
      getSignature: getSignature // 前文中所述的获取上传签名的函数
    });
  },
  methods: {
    async wxOpen() {
      const targetUrl = encodeURI(location.href);
      // console.log(targetUrl, 'targetUrl', $api)

      const jssdk = await $api.userOption.share({ target_url: targetUrl });
      // console.log(jssdk)
      window.wx.config({
        debug: false, // 是否开启调试模式
        appId: jssdk.appId, // appid
        timestamp: jssdk.timestamp, // 时间戳
        nonceStr: jssdk.nonceStr, // 随机字符串
        signature: jssdk.signature, // 签名
        jsApiList: [
          "onMenuShareTimeline",
          "onMenuShareAppMessage",
          "onMenuShareQQ",
          "onMenuShareWeibo",
          "onMenuShareQZone",
          "chooseImage"
        ] // 需要使用的JS接口列表
      });
      window.wx.chooseImage({
        count: 9, // 最多可以选择的图片张数，默认9
        sizeType: ["original", "compressed"], // original 原图，compressed 压缩图，默认二者都有
        sourceType: ["album", "camera"], // album 从相册选图，camera 使用相机，默认二者都有
        success: function(res) {
          window.alert(res, "res");
          console.log(res, "res");
          // $this.images.localId = res.localIds;
          // let obj = {};
          // obj.src = res.localIds;
          // $this.ioslocId.push(obj);
          // $this.scrollFn();
          // $this.uploadImge();
          // if ($this.ioslocId.length >= 9) {
          //   $this.imgBoolean = false;
          // }
        },
        fail: function(err) {
          console.log(err, "err");
        }
      });
      window.wx.ready(function() {});
    },
    cancelUpload() {
      this.uploader.cancel();
      this.videoProgress = 0;
      window.alert("已取消");
    },
    videoChange(e) {
      window.alert(e.name, "name");
      const mediaFile = e.raw;
      const uploader = this.tcVod.upload({
        mediaFile: mediaFile // 媒体文件（视频或音频或图片），类型为 File
      });
      this.uploader = uploader;
      this.uploadSectionFile(uploader, e);
    },
    uploadSectionFile(uploader, e) {
      // 进度
      uploader.on("media_progress", info => {
        this.videoProgress = Math.floor(info.percent * 100);
        if (info.percent === 1) {
          this.videoProgressShow = false;
          this.videoProgress = 0;
        }
        console.log(info.percent, "info.percent"); // 进度
      });
      // 上传后的数据
      uploader
        .done()
        .then(doneResult => {
          // deal with doneResult
          this.form.file_id = doneResult.fileId;
          this.form.media_url = doneResult.video.url;
          this.fileVideoList = [
            // { name: e.raw.name, url: doneResult.video.url }
            {
              name: this.form.patriarchPhone || e.raw.name,
              url: doneResult.video.url
            }
          ];
          // console.log(doneResult, 'doneResult')
        })
        .catch(function(err) {
          // deal with error
          console.log(err, "err");
        });
    },
    handleRequest(params) {
      console.log(params, "params");
    }
  }
};
</script>
<style scoped lang="less"></style>
